<template>
  <div class="product-module pc-only">
    <div class="subtitle"><span>{{ $t('navbar.categories') }}</span><a class="more" :href="'/#/product-center/' + productList[0].cate_id"></a></div>
    <router-link :to="Rlink(item)" class="nav-item" v-for="(item, index) in productList">
      <div class="nav" :class="{active: nowIndex == index || currentPage('/product-center/'+item.cate_id)}" @click="toggle(index)">{{item.cate_name}}</div>
        <!-- <transition name="fade"> -->
          <li v-if="nowIndex == index && currentPage('/product-center')">
            <router-link :to="'/product-center/'+item2.cate_id" class="nav-item-son" :class="{active2: currentPage('product-center/'+item2.cate_id)}" v-for="(item2, index2) in item.list">{{item2.cate_name}}</router-link>
          </li>
        <!-- </transition> -->
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'product-module',
    data() {
      return {
        nowIndex: -1,
        productList: []
      }
    },
    mounted() {
      this.getNavList();
    },
    methods: {
      Rlink(item) {
        if (item.cate_id) {
          return '/product-center/' + item.cate_id
        } else {
          return '/product-center/' + item.list[0].cate_id
        }
      },
      currentPage(index) {
        return -1<this.$route.path.indexOf(index) || -1<location.href.indexOf(index);
      },  
      toggle(index) {
        if (this.nowIndex == index) {
          this.nowIndex = -1;
        } else {
          this.nowIndex = index;
        }
      },
      getNavList() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise((resolve) => {
            resolve([{
              cate_name: '物位计',
              list: [{
                cate_name: '雷达物位计',
                cate_id: 1
              },{
                cate_name: '超声波物位计',
                cate_id: 2
              }]
            },{
              cate_name: '电动执行机构',
              cate_id: 3
            },{
              cate_name: '流量计',
              cate_id: 4
            },{
              cate_name: '二次仪表',
              cate_id: 5
            }])
          }).then((res) => {
            that.productList = res;
          })
        }

        this.$axios.get('/pc.php/goods/goodsCateList').then((res) => {
          that.productList = res.data
        })
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .product-module {
    display: inline-block;
    width: 240px;
    .On-xs({
      display: none;
    });
    >a {
      box-sizing: border-box;
      display: inline-block;
      width: 100%;
      line-height: 48px;
    }
    .th {
      color: #fff;
      background-color: #006d60;
    }
    .nav-item {
      .nav {
        cursor: pointer;
        color: #666;
        background-color: #f7f7f7;
        padding-left: 20px;
        &:hover {
          background-color: #339186;
          color: #fff;
        }
        &.active {
          background-color: #339186;
          color: #fff;
        }
      }
      // .fade-enter-active, .fade-leave-active {
      //   transition: all .5s;
      // }
      // .fade-enter, .fade-leave-to {
      //   height: 0;
      // }
      .nav-item-son {
        display: block;
        width: 220px;
        line-height: 48px;
        color: #666;
        background-color: #e7e7e7;
        padding-left: 20px;
        &:hover {
          color: #006d60;
        }
        &.active2 {
          color: #006d60;
        }
      }
    }
  }
</style>